<template>
  <el-card>
    <template #header>
      <div>消息提醒</div>
    </template>
    <el-row style="margin-bottom: 12px">
      <el-input v-model="Text" :rows="4" type="textarea" />
    </el-row>
    <el-row>
      <el-button type="primary" @click="handlePushAll()">全部推送</el-button>
      <el-button type="success" @click="handlePushVoice()">推送语音</el-button>
      <el-button type="warning" @click="handlePushPage()">
        推送网页消息
      </el-button>
      <el-button type="info" @click="handlePushSystem()">
        推送系统提示
      </el-button>
    </el-row>
  </el-card>
</template>

<script setup>
  import { reactive } from "vue";

  const Text = reactive("彦祖，你妈喊你回家吃饭啦");
  const Title = reactive("消息");

  const handlePushAll = () => {
    handlePushVoice();
    handlePushSystem();
    handlePushPage();
  };
  const handlePushVoice = () => {
    // 检查浏览器是否支持Web Speech API
    if ("speechSynthesis" in window) {
      // 获取用户授权
      speechSynthesis.onvoiceschanged = function () {
        var voices = speechSynthesis.getVoices();
        var voice = voices.find(function (voice) {
          return voice.lang === "zh-CN";
        });

        // 创建语音合成实例
        var synthesis = new SpeechSynthesisUtterance(Text);

        // 设置语音合成参数
        synthesis.voice = voice;
        synthesis.rate = 1;
        synthesis.pitch = 1;

        // 启动语音合成
        speechSynthesis.speak(synthesis);
      };
    } else {
      console.log("浏览器不支持语音合成功能！");
    }
  };
  const handlePushSystem = () => {
    if ("Notification" in window) {
      Notification.requestPermission().then(function (permission) {
        if (permission === "granted") {
          // 用户同意显示通知
          new Notification(Title, {
            body: Text,
            icon: "图标路径",
          });
        } else if (permission === "denied") {
          // 用户拒绝显示通知
        }
      });

      // 支持通知功能
    } else {
      // 不支持通知功能
    }
  };
  const handlePushPage = () => {
    ElNotification({
      title: Title,
      message: Text,
      position: "bottom-right",
    });
  };
</script>

<style lang="scss" scoped></style>
